<template>
	<view class="page">
		<up-short-video 
			:tabs-list="tabsList"
			:video-list="videoList"
			:current-tab="currentTab"
			:current-video="currentVideo"
			@tabChange="onTabChange"
			@videoChange="onVideoChange"
			@like="onLike"
			@comment="onComment"
			@share="onShare"
			@collect="onCollect"
		>
			<!-- 自定义菜单按钮 -->
			<template #menu>
				<view class="custom-menu">
					<up-icon name="grid" size="22px" color="#ddd"></up-icon>
				</view>
			</template>
			
			<!-- 自定义搜索按钮 -->
			<template #search>
				<view class="custom-search">
					<up-icon name="search" size="22px" color="#ddd"></up-icon>
				</view>
			</template>
			
			<!-- 自定义操作按钮 -->
			<template #actions="{item, index}">
				<view class="custom-actions">
					<view class="action-item" @click="onLike({item, index})">
						<up-icon 
							:name="item.isLiked ? 'thumb-up-fill' : 'thumb-up'" 
							size="32px" 
							color="#eee"
						></up-icon>
						<text class="action-text">{{ item.likeCount }}</text>
					</view>
					<view class="action-item" @click="onComment({item, index})">
						<up-icon name="chat" size="32px" color="#eee"></up-icon>
						<text class="action-text">{{ item.commentCount }}</text>
					</view>
					<view class="action-item" @click="onShare({item, index})">
						<up-icon name="share" size="32px" color="#eee"></up-icon>
						<text class="action-text">{{ item.shareCount }}</text>
					</view>
					<view class="action-item" @click="onCollect({item, index})">
						<up-icon 
							:name="item.isCollected ? 'bookmark-fill' : 'bookmark'" 
							size="32px" 
							color="#eee"
						></up-icon>
						<text class="action-text">{{ item.collectCount }}</text>
					</view>
					<!-- <view class="action-item">
						<up-icon name="user" size="32px" color="#eee"></up-icon>
					</view> -->
				</view>
			</template>
			<template #tabbar> 
				<up-tabbar
                    :fixed="true"
                    :placeholder="true"
                    :safeAreaInsetBottom="true"
                    borderColor="rgba(255,255,255,0.25) !important"
                    backgroundColor="rgba(255,255,255,0.05)"
                >
                    <up-tabbar-item
                        @click="goNext"
                        text="首页"
                        icon="home"
                    >
                    </up-tabbar-item>
                    <up-tabbar-item
                        text="放映厅"
                        icon="photo"
                    ></up-tabbar-item>
                    <up-tabbar-item
                        text="直播"
                        icon="play-right"
                    ></up-tabbar-item>
                    <up-tabbar-item
                        text="我的"
                        icon="account"
                    ></up-tabbar-item>
                </up-tabbar>
			</template>
		</up-short-video>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				currentVideo: 0,
				tabsList: [
					{ name: '推荐' },
					{ name: '关注' },
					{ name: '朋友' },
					{ name: '本地' }
				],
				videoList: [
					{
						videoUrl: 'https://uview-plus.jiangruyi.com/big/rjtsdl.MP4',
						progress: 0,
						bgColor: '#000',
						author: {
							avatar: '/static/avatar1.jpg',
							name: '创作者1',
							desc: '这是一段视频描述'
						},
						isLiked: false,
						likeCount: 128,
						commentCount: 25,
						shareCount: 12,
						collectCount: 8,
						isCollected: false
					},
					{
						videoUrl: 'https://uview-plus.jiangruyi.com/big/shanghai.mp4',
						progress: 0,
						bgColor: '#000',
						author: {
							avatar: '/static/avatar2.jpg',
							name: '创作者2',
							desc: '记录美好生活'
						},
						isLiked: true,
						likeCount: 863,
						commentCount: 96,
						shareCount: 32,
						collectCount: 45,
						isCollected: true
					},
					{
						videoUrl: 'https://uview-plus.jiangruyi.com/big/shanghai.mp4',
						progress: 0,
						bgColor: '#000',
						author: {
							avatar: '/static/avatar3.jpg',
							name: '创作者3',
							desc: '生活需要仪式感'
						},
						isLiked: false,
						likeCount: 562,
						commentCount: 47,
						shareCount: 21,
						collectCount: 19,
						isCollected: false
					}
				]
			}
		},
		methods: {
			onTabChange(index) {
				console.log('切换tab到:', index);
				this.currentTab = index;
			},
			onVideoChange(index) {
				console.log('切换视频到:', index);
				this.currentVideo = index;
			},
			onLike({ item, index }) {
				console.log('点赞视频:', index);
				// 更新点赞状态和数量
				this.videoList[index].isLiked = !this.videoList[index].isLiked;
				this.videoList[index].likeCount += this.videoList[index].isLiked ? 1 : -1;
			},
			onComment({ item, index }) {
				console.log('评论视频:', index);
				uni.showToast({
					title: '评论功能',
					icon: 'none'
				});
			},
			onShare({ item, index }) {
				console.log('分享视频:', index);
				uni.showToast({
					title: '分享功能',
					icon: 'none'
				});
			},
			onCollect({ item, index }) {
				console.log('收藏视频:', index);
				// 更新收藏状态和数量
				this.videoList[index].isCollected = !this.videoList[index].isCollected;
				this.videoList[index].collectCount += this.videoList[index].isCollected ? 1 : -1;
			}
		}
	}
</script>

<style scoped>
	.page {
		width: 100%;
		height: 100vh;
		background-color: #000;
	}
	
	.custom-menu, .custom-search {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.custom-actions {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}
	
	.action-text {
		color: #fff;
		font-size: 12px;
		margin-top: 5px;
	}
</style>